/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div :class="['footer', onePageVis ? 'show' : 'hide']">
    <div class="footer-row">
      <div class="footer-cell">
        <div class="main">
          <el-row :gutter="24" style="height: 100%;">
            <el-col :span="8" style="height: 100%; display: flex;">
              <img :src="require('../../assets/img/fang.png')" alt>
            </el-col>
            <el-col
              :span="16"
              style="height: 100%;display: flex;justify-content: center;flex-direction: column;align-content: center;"
            >
              <div class="num" id="pro-user-num"></div>
              <div class="text">征收总户数(户)</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="footer-cell">
        <div class="main">
          <el-row :gutter="24" style="height: 100%;">
            <el-col :span="8" style="height: 100%; display: flex;">
              <img :src="require('../../assets/img/mj.png')" alt>
            </el-col>
            <el-col
              :span="16"
              style="height: 100%;display: flex;justify-content: center;flex-direction: column;align-content: center;"
            >
              <div class="num" id="pro-area-num"></div>
              <div class="text">征收总面积(平方)</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="footer-cell">
        <div class="main">
          <el-row :gutter="24" style="height: 100%;">
            <el-col :span="8" style="height: 100%; display: flex;">
              <img :src="require('../../assets/img/zj2.png')" alt>
            </el-col>
            <el-col
              :span="16"
              style="height: 100%;display: flex;justify-content: center;flex-direction: column;align-content: center;"
            >
              <div class="num" id="pro-money-num"></div>
              <div class="text">资金总需求(万元)</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="footer-cell">
        <div class="main">
          <el-row :gutter="24" style="height: 100%;">
            <el-col :span="8" style="height: 100%; display: flex;">
              <img :src="require('../../assets/img/jj.png')" alt>
            </el-col>
            <el-col
              :span="16"
              style="height: 100%;display: flex;justify-content: center;flex-direction: column;align-content: center;"
            >
              <div class="num" id="pro-compensation-num"></div>
              <div class="text">补偿均价(元/平方)</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ECharts from "vue-echarts";

export default {
  props: {
    onePageVis: Boolean,
    onePageData: Object,
    priceofavg: [Number, String]
  },
  data() {
    return {};
  },
  watch: {
    onePageData: function(data) {
      this.setNum();
    }
  },
  methods: {
    setNum() {
      const self = this;
      let onePageData = this.onePageData;
      if (onePageData && onePageData.user) {
        setTimeout(() => {
          const user = new CountUp(
            "pro-user-num",
            0,
            onePageData.user.total,
            0,
            1.5
          );
          const area = new CountUp(
            "pro-area-num",
            0,
            onePageData.area.total,
            0,
            1.5
          );
          const money = new CountUp(
            "pro-money-num",
            0,
            onePageData.amount.total / 10000,
            0,
            1.5
          );
          const compensation = new CountUp(
            "pro-compensation-num",
            0,
            self.priceofavg,
            0,
            1.5
          );
          user.start();
          area.start();
          money.start();
          compensation.start();
        }, 1000);
      }
    }
  },
  mounted() {
    this.setNum();
  },
  components: {
    "v-chart": ECharts
  }
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";
.pageOne {
}
.footer {
  transition: transform ease-out 0.6s;
  position: absolute;
  left: 0;
  bottom: 10%;
  height: 12%;
  min-height: 80px;
  width: 100%;
  z-index: 6;
  padding: 0 8vw;
  .footer-row {
    width: 100%;
    height: 100%;
    .el-row {
      margin: 0 !important;
      .el-col {
        padding: 0 0.5vw !important;
      }
    }

    .footer-cell {
      display: inline-block;
      width: 25%;
      height: 100%;
      padding: 0 0.5vw;
      .main {
        width: 100%;
        height: 100%;
        background-color: @bg;
        overflow: hidden;
        padding: 0.2vw;
        img {
          width: 100%;
          // height: 100%;
          margin: auto;
        }
        .num,
        .text {
          text-align: left;
          font-weight: 500;
        }
        .num {
          font-size: 2rem;
          vertical-align: middle;
          // margin-top: 1.8vw;
          color: @primary;
          font-family: "digifacewide";
        }
        .text {
          font-size: 1rem;
          margin-top: 0.5vw;
          color: @gray;
        }
      }
    }
  }
}

.hide {
  transform: translate3d(-100%, 0, 0px);
}

.show {
  transform: translate3d(0px, 0px, 0px);
}
</style>
